<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>关键词自动回复设置</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">关键词自动回复设置</li>
                                <li style="display: none">状态自动回复设置</li>
                                <li>通过自动回复设置</li>
                            </ul>
                            <div class="layui-tab-content" style="height: 100px;">
                                <div class="layui-tab-item layui-show">
                                    <div class="">
                                        <a class="layui-btn layui-btn-sm" href="edit1.html">添加</a>&nbsp;&nbsp;
                                        <form class="layui-inline" action="">
                                            <select id="status3" style="layui-input-inline" onchange="reloadList3()">
                                                <option value="1">启用的</option>
                                                <option value="0">禁用的</option>
                                                <option value="9">全部</option>
                                            </select>&nbsp;&nbsp;
                                            <button class="layui-btn layui-btn-xs" onclick="reloadList3();">搜索</button>
                                            <button class="layui-btn layui-btn-xs layui-btn-primary"
                                                    onclick="reloadList3(true);">重置
                                            </button>
                                        </form>
                                    </div>
                                    <table id="LAY-list-auto_reply3" lay-filter="LAY-auto_reply3"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="">
                                        <a class="layui-btn layui-btn-sm" href="edit2.html">添加</a>&nbsp;&nbsp;
                                        <form class="layui-inline" action="">
                                            <select id="status1" style="layui-input-inline" onchange="reloadList1()">
                                                <option value="1">启用的</option>
                                                <option value="0">禁用的</option>
                                                <option value="9">全部</option>
                                            </select>&nbsp;&nbsp;
                                            <button class="layui-btn layui-btn-xs" onclick="reloadList1();">搜索</button>
                                            <button class="layui-btn layui-btn-xs layui-btn-primary"
                                                    onclick="reloadList1(true);">重置
                                            </button>
                                        </form>
                                    </div>
                                    <table id="LAY-list-auto_reply1" lay-filter="LAY-auto_reply1"></table>
                                </div>
                                <div class="layui-tab-item">

                                    <div class="">
                                        <a class="layui-btn layui-btn-sm" href="edit2.html">添加</a>&nbsp;&nbsp;
                                        <form class="layui-inline" action="">
                                            <select id="status2" style="layui-input-inline" onchange="reloadList2()">
                                                <option value="1">启用的</option>
                                                <option value="0">禁用的</option>
                                                <option value="9">全部</option>
                                            </select>&nbsp;&nbsp;
                                            <button class="layui-btn layui-btn-xs" onclick="reloadList2();">搜索</button>
                                            <button class="layui-btn layui-btn-xs layui-btn-primary"
                                                    onclick="reloadList2(true);">重置
                                            </button>
                                        </form>
                                    </div>
                                    <table id="LAY-list-auto_reply2" lay-filter="LAY-auto_reply2"></table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script>
        var reloadList1;
        var reloadList2;
        var reloadList3;
        layui.use(['element', 'table', 'form', 'laydate'], function(){
            var $ = layui.$
                ,table = layui.table
                ,laydate = layui.laydate
                ,form = layui.form
                ,element = layui.element;

            element.init();

            var status1 = $('#status1').find("option:selected").val();
            var status2 = $('#status2').find("option:selected").val();
            var status3 = $('#status3').find("option:selected").val();
            table.render({
                elem: '#LAY-list-auto_reply1'
//            ,height: 315
                ,where: {//设定异步数据接口的额外参数
                    status: status1
                }
                ,url: '/auto_reply/list_data/?page=1&limit=20&status=1&type=1' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', hide:true}
                    ,{field: 'sort', title: '排序', width:80, sort: true}
                    ,{field: 'name', title: '状态名'}
                    ,{field: 'content_type', title: '内容类型', width:100, templet: '#content_typeTpl', hide:true}
                    ,{field: 'content', title: '内容', hide:true}
                    ,{field: 'file_name', title: '图片', width:80, templet: '#imge', hide:true}
                    ,{field: 'status', title: '状态', width:100, templet: '#statusTpl1', unresize: true}
                    ,{fixed: 'right', align:'center', toolbar: '#barDemo1', width:200}
                ]]
                ,title: '列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
            });

            //监听工具条
            table.on('tool(LAY-auto_reply1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('确认删除此自动回复？', function (index) {
                        $.ajax({
                            type: "GET",
                            url: "/auto_reply/delete/"+data.id,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg('删除成功', {icon: 6});
                                    var targetUrl = '/auto_reply/index';
                                    setTimeout(function () {
                                        location.href = targetUrl;
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status1, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                            }
                        });
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
                }
            });

            reloadList1 = function (reset) {
                if (reset==true) {
                    $('#status1').find('option:first').attr("selected",false);
                    $('#status1').find('option:first').attr("selected",true);
                    $('#search1').val('');
                }
                var status1 = $('#status1').find("option:selected").val();
                // var search = $('#search').val();
                table.reload('LAY-list-auto_reply1', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status1
                        // search: search
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };

            table.render({
                elem: '#LAY-list-auto_reply2'
//            ,height: 315
                ,where: {//设定异步数据接口的额外参数
                    status: status2
                }
                ,url: '/auto_reply/list_data/?page=1&limit=10&status=1&type=2' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', hide:true}
                    ,{field: 'sort', title: '排序', width:80, sort: true}
                    ,{field: 'name', title: '标题'}
                    ,{field: 'content_type', title: '内容类型', width:100, templet: '#content_typeTpl', hide:true}
                    ,{field: 'content', title: '内容', hide:true}
                    ,{field: 'file_name', title: '图片', width:80, templet: '#imge', hide:true}
                    ,{field: 'delay_minute', title: '回复执行时间', width:130, templet: '#delay_minute', unresize: true}
                    ,{field: 'status', title: '状态', width:100, templet: '#statusTpl1', unresize: true}
                    ,{fixed: 'right', align:'center', toolbar: '#barDemo2', width:200}
                ]]
                ,title: '列表'
            });

            //监听工具条
            table.on('tool(LAY-auto_reply2)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('确认删除此自动回复？', function (index) {
                        $.ajax({
                            type: "GET",
                            url: "/auto_reply/delete/"+data.id,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg('删除成功', {icon: 6});
                                    var targetUrl = '/auto_reply/index';
                                    setTimeout(function () {
                                        location.href = targetUrl;
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status2, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                            }
                        });
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
                }
            });

            reloadList2 = function (reset) {
                if (reset==true) {
                    $('#status2').find('option:first').attr("selected",false);
                    $('#status2').find('option:first').attr("selected",true);
                    $('#search2').val('');
                }
                var status2 = $('#status2').find("option:selected").val();
                // var search = $('#search').val();
                table.reload('LAY-list-auto_reply2', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status2
                        // search: search
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };

            table.render({
                elem: '#LAY-list-auto_reply3'
//            ,height: 315
                ,where: {//设定异步数据接口的额外参数
                    status: status3
                }
                ,url: '/auto_reply/list_data/?page=1&limit=10&status=1&type=3' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', hide:true}
//                ,{field: 'sort', title: '排序', width:80, sort: true}
                    ,{field: 'name', title: '关键词'}
                    ,{field: 'content_type', title: '内容类型', width:100, templet: '#content_typeTpl', hide:true}
                    ,{field: 'content', title: '内容', hide:true}
                    ,{field: 'file_name', title: '图片', width:80, templet: '#imge', hide:true}
                    ,{field: 'interval_minute', title: '回复间隔时间', width:130, templet: '#interval_minute', unresize: true}
                    ,{field: 'delay_minute', title: '回复执行时间', width:130, templet: '#delay_minute', unresize: true}
                    ,{field: 'status', title: '状态', width:100, templet: '#statusTpl1', unresize: true}
                    ,{fixed: 'right', align:'center', toolbar: '#barDemo3', width:200}
                ]]
                ,title: '列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
            });

            //监听工具条
            table.on('tool(LAY-auto_reply3)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('确认删除此自动回复？', function (index) {
                        $.ajax({
                            type: "GET",
                            url: "/auto_reply/delete/"+data.id,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg('删除成功', {icon: 6});
                                    var targetUrl = '/auto_reply/index';
//                        var groupId = (dataObj.groupId ? dataObj.groupId : '');
//                        if (groupId > 0) {
//                            targetUrl = '/message/editGroupEnhance/'+groupId;
//                        }
                                    setTimeout(function () {
                                        location.href = targetUrl;
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status3, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                            }
                        });
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
                }
            });

            reloadList3 = function (reset) {
                if (reset==true) {
                    $('#status3').find('option:first').attr("selected",false);
                    $('#status3').find('option:first').attr("selected",true);
                    $('#search3').val('');
                }
                var status3 = $('#status3').find("option:selected").val();
                // var search = $('#search').val();
                table.reload('LAY-list-auto_reply3', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status3
                        // search: search
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };

            form.on('switch(statusDemo)', function(obj){
                var status = 0;
                if (obj.elem.checked) {
                    status = 1;
                }
                var id = this.step;
                var post = {
                    id: id,
                    status: status
                };
                $.ajax({
                    type: "POST",
                    url: "/auto_reply/changeStatus",
                    data: post,
                    success:function(response){
                        var dataObj = $.parseJSON(response);
                        if(dataObj.code == 0) {
                            layer.tips('修改成功', obj.othis);
                        } else if(dataObj.code == -1) {
                            layer.tips(dataObj.msg, obj.othis);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }

                        setTimeout(function(){
                            reloadList1();
                            reloadList2();
                            reloadList3();
                        }, 1000);
                    },
                    error: function (request, status, error) {

                    }
                });
                return false;
            });
        });

        function showImg(id){
            // window.open('/auto_reply/getImg/'+id+'', '_blank');
            // return false;
            var img = '/auto_reply/getImg/'+id+'';
            console.log(img);
            layer.open({
                type: 2,//Page层类型
                area: ['650px', '500px'],
                title: false,
                shade: 0.6 ,//遮罩透明度
                maxmin: false ,//允许全屏最小化
                anim: 1 ,//0-6的动画形式，-1不开启
                content: img
            });
        };

        var getMaterial, getMediaLayer;
        getMaterial = function (mediaUrl, images, type) {
            layer.close(getMediaLayer);
            switch (type) {
                case 'HDIMG':
                    var jsonStr = '{"code":0,"msg":"","title":"","id":1,"start":0,"data":[{"alt":"","src":"' + mediaUrl + '","thumb":""}]}';
                    if (images) {
                        images = images.split(',');
                        var imageJsonStr = '';
                        layui.each(images, function (index, image) {
                            imageJsonStr += ',{"alt":"","src":"' + image + '","thumb":""}'
                        });
                        if (imageJsonStr != '') {
                            imageJsonStr = imageJsonStr.substr(1);
                            jsonStr = '{"code":0,"msg":"","title":"","id":1,"data":[' + imageJsonStr + ']}';
                        }
                    }
                    var json = $.parseJSON(jsonStr);
                    layer.photos({
                        photos: json, //格式见API文档手册页
                        shift: 5
                    });
                    break;
                    window.open(mediaUrl, '_blank');
                    break;
            }
        };
    </script>
    <script type="text/html" id="content_typeTpl">
        {{# if(d.content_type == 1){ }}
        <span style="color: black;">文字</span>
        {{# } else if(d.content_type == 2){ }}
        <span style="color: orange;">语音</span>
        {{# } else if(d.content_type == 3){ }}
        <span style="color: green;">图片</span>
        {{# } else if(d.content_type == 4){ }}
        <span style="color: blue;">文件</span>
        {{# } else if(d.content_type == 5){ }}
        <span style="color: orchid;">视频</span>
        {{# } }}
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 1){ }}
        <span style="color: green;">启用</span>
        {{# } else if(d.status == 0){ }}
        <span style="color: red;">禁用</span>
        {{# } }}
    </script>
    <script type="text/html" id="barDemo1">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" href="/v1/auto_reply/edit/1/{{d.id}}"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del">删除</button>
    </script>
    <script type="text/html" id="barDemo2">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" href="/v1/auto_reply/edit/2/{{d.id}}"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del">删除</button>
    </script>
    <script type="text/html" id="barDemo3">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" href="/v1/auto_reply/edit/3/{{d.id}}"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del">删除</button>
    </script>
    <script type="text/html" id="statusTpl1">
        <input type="checkbox"  name="reuse" step="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>
    </script>
    <script  type="text/html" id="imge">
        <!--    <label>{{d.file_name}}</label>-->
        <button class="layui-btn layui-btn-xs layui-btn-warm" onclick="showImg('{{d.id}}');" {{ d.file_name != "" ? '' : 'style="display: none"' }}>查看</button>
        <!--{{ if(d.file_name != "") {'<button class="layui-btn layui-btn-xs layui-btn-warm" onclick="showImg('/auto_reply/getImg/{{d.id}}');">查看</button>'}}}-->
    </script>
    <script  type="text/html" id="interval_minute">
        <label>{{d.interval_minute}}分钟</label>
        <!--{{ if(d.file_name != "") {'<button class="layui-btn layui-btn-xs layui-btn-warm" onclick="showImg('/auto_reply/getImg/{{d.id}}');">查看</button>'}}}-->
    </script>
    <script  type="text/html" id="delay_minute">
        {{# if(d.delay_minute > 0){ }}
        <label>{{d.delay_minute}}分钟后</label>
        {{# } else { }}
        <label>立即</label>
        {{# } }}
    </script>
</div>
</body>
</html>
